<template>
<div>
  <h1>广告添加</h1>
  <p>类型:<input type="text" v-model="form.type"></p>
  <p>图片:<input type="file" name="picture" id="picture"></p>
  <p>网址:<input type="text" v-model="form.herf"></p>
  <p>
    <button @click="add">添加</button>
  </p>

  <h1>广告展示</h1>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <td>类型</td>
      <td>图片</td>
      <td>网址</td>
    </tr>
    <tr v-for="i in advlist">
      <td>{{i.type}}</td>
      <td><img :src="'http://127.0.0.1:8000'+i.picture" alt="" width="200" height="200"></td>
      <td>{{i.herf}}</td>
    </tr>
    <tr>
      <td>
        <button v-for="i in tpages" @click="get_advlist(i)">{{i}}</button>
      </td>
    </tr>
  </table>
</div>
</template>

<script>
export default {
  name: "advertising",
  data(){
    return{
      form:{},
      advlist:[],
      tpages:[]
    }
  },
  methods:{
    add(){
      let pic=document.getElementById('picture').files[0]
      let formData=new FormData
      formData.append('type',this.form.type)
      formData.append('picture',pic)
      formData.append('herf',this.form.herf)
      this.axios.post('userm/Adv/',formData)
      .then(res=>{
        console.log(res.data)
      })
    },
    get_advlist(cpage){
      this.axios.get('userm/Adv/?cpage='+cpage)
      .then(res=>{
        this.advlist=res.data.advlist
        this.tpages=res.data.tpages
      })
    },

  },
  mounted() {
    this.get_advlist(1)
  }
}
</script>

<style scoped>

</style>
